<template>
  <!-- <el-form :inline="true" size="small" :model="queryData" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="queryData.name" placeholder="请输入用户名" clearable />
    </el-form-item>
    <el-form-item><el-button @click="getData">查询</el-button></el-form-item>
  </el-form> -->
  <div><el-button @click="addPort">新增部门</el-button></div>
  <el-table :data="pageData.tableData" style="width: 100%">
    <el-table-column type="index" width="60" label="序号" />
    <el-table-column prop="name" label="部门名称" width="180" />
    <el-table-column prop="num" label="部门人数" width="180" />
    <el-table-column prop="charge" label="负责人" />
    <el-table-column prop="job" label="职务" />
    <el-table-column prop="tel" label="手机号" />
    <el-table-column prop="address" label="操作" width="240">
      <template #default="scope">
        <el-button type="primary" size="small" @click="doEdit(scope.row.id)">编辑</el-button>
        <el-button type="primary" size="small" @click="setAuth(scope.row.id)">设置权限</el-button>
        <el-popconfirm
          width="220"
          cancel-button-text="取消"
          confirm-button-text="确定"
          icon-color="#626AEF"
          @confirm="doDelete(scope.row.id)"
          title="确定要删除此员工吗？"
        >
          <template #reference>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <PortForm v-if="showForm" :id="curId" @close="closeDialog"></PortForm>
  <AuthConfig v-if="showAuthConfig" :id="curId" @close="closeDialog"></AuthConfig>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { GET_PORT_LIST, DELETE_PORT } from '@/api/port'
import PortForm from './components/PortForm.vue'
import AuthConfig from './components/AuthConfig.vue'
import { ElMessage } from 'element-plus'
const curId = ref('')
const showAuthConfig = ref(false)
const addPort = () => {
  curId.value = ''
  showForm.value = true
}
const showForm = ref(false)
const pageData = reactive({
  tableData: []
})
const closeDialog = (flag?: boolean) => {
  showForm.value = false
  showAuthConfig.value = false
  if (flag) {
    getData()
  }
}
const getData = () => {
  GET_PORT_LIST().then((res) => {
    console.log(res)
    pageData.tableData = res.data
  })
}
getData()
const doEdit = (id: string) => {
  curId.value = id
  console.log('编辑')
  showForm.value = true
}
const doDelete = (id: string) => {
  DELETE_PORT(id).then(() => {
    ElMessage.success('删除成功')
    getData()
  })
}
const setAuth = (id: string) => {
  curId.value = id
  showAuthConfig.value = true
}
</script>

<style></style>
